<template>
  <topHeader></topHeader>
  <div class="elmain">
    <div class="aside">
      <menuComponent></menuComponent>
    </div>
    <div class="tables">
      <div class="content">
        <Breadcrumb :routes="currentRoutes" ></Breadcrumb>
        <router-view></router-view>
      </div>

    </div>

  </div>


</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import MenuComponent from "@/components/menu/index.vue";
import Breadcrumb from "@/components/breadcrumb/index.vue";
import topHeader from "@/components/topHeader/index.vue";
import { TeacherInfo } from "@/stores/counter";


const userStore= TeacherInfo();

const currentRoutes = ref([
  { name: '首页', path: '/' },
  { name: '用户管理', path: '/users' },
  { name: '用户列表', path: '/users/list' },
]);

onMounted(()=>{
  userStore.teacherinfo.teacherName = JSON.parse(localStorage.getItem("token")).teacherName;
    userStore.teacherinfo.teacherId = JSON.parse(localStorage.getItem("token")).teacherId;
})
</script>
<style scoped >
.elmain{
  display: flex;
  justify-content: space-between;
  .aside{
    width: 15%;
    background-color: #0b62a7 !important
  }
}
.tables{
  width: 85%;
  padding: 20px ;
  min-height: 86vh;
  background-color: #f5f6fa;
  .content{
    padding: 20px;
    background-color: #ffffff;
  }
}
</style>